<template>
  <div class="box">
     <div class="header">header</div>
     <div class="main">
        <!-- <ul>
            <li v-for="item in arr" :key="item.id">{{ item.msg }}</li>
        </ul> -->
        <!-- 有公共的头部和尾部，但是中间部分不一样，子组件实现公共部分，父组件实现区别部分

            父组件将数据给了子组件，子组件去展示，子组件展示的时候结构有不同，
            我们决定让父组件来展示结构不同的部分，子组件通过slot接收，
            父组件需要子组件将数据传递回来，子组件通过slot上定义自定义属性传递，父组件通过template的v-slot接收数据，进行展示
         -->
        <slot :data="arr"></slot>
     </div>
     <div class="footer">footer</div>
  </div>
</template>

<script>
export default {
    props:["arr"]
}
</script>

<style scoped>
    .header{
        height:50px;
        background: teal;
    }
    .footer{
        height:50px;
        background:#666
    }
</style>